<template>
  <el-container>
    <el-header :height="'30'">
      <Header/>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer>
      <Footer/>
    </el-footer>
  </el-container>
</template>
<script>
import Header from "@/components/Header/index.vue";
import {watch} from "vue";
import {ApiGetUserInfo} from "@/http/api";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";
import Footer from "@/views/Footer.vue";

export default {
  components: {
    Footer,
    Header,
  },

  setup() {
    const store = useStore();
    watch(
        () => store.state.token,
        (value) => {
          if (value && !store.state.userInfo) {
            ApiGetUserInfo().then((res) => {
              let info = res[0];
              let account = res[1];
              if (info.code === 2000) {
                store.commit("setUserInfo", info.data);
              } else {
                console.log("ApiGetUserInfo Error[UserInfo]:", info);
                ElMessage.error("请求用户信息出错!");
              }
              if (account.code === 2000) {
                store.commit("setUserAmount", account.data.amount);
              } else {
                console.log("ApiGetUserInfo Error[Account]:", account);
                ElMessage.error("请求用户信息出错!");
              }
            });
          }
        }
    );
    store.commit("setToken", localStorage.getItem("token"));
  },
};
</script>
<style lang="less">
html,
body,
#app,
.el-container {
  padding: 0px;
  margin: 0px;
  height: 100%;
}

.el-header {
  background-color: #f2f6fc;
  color: white;
  text-align: center;
}

.el-main {
  background-color: #fafafa;
  color: #333;
  text-align: center;
}
</style>
